<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>订单管理</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">


</head>

<body class="sticky-header">

<div id="app">
    <!--Start left side Menu-->
    <div id="nav-left" class="left-side sticky-left-side">
    </div>
    <!--End left side menu-->


    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <!--        <script src="assets/js/commonPage/header.js"></script>-->
        <div class="header-section">

            <a class="toggle-btn"><i class="fa fa-bars"></i></a>

            <form class="searchform">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
            </form>

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img :src="avatar" alt=""/>
                            头像
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                            <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                            <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                            <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->


        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row" style="background-color: white;">
                <div class="" style="background-color: white;border-bottom: solid black 1px">
                    <h3 style="margin-left: 10px">订单管理</h3>
                </div>
                <div class="" style="background-color: white;margin-top: 30px;">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">订单id</th>
                            <th scope="col">发货地址</th>
                            <th scope="col">买家</th>
                            <th scope="col">卖家</th>
                            <th scope="col">总金额</th>
                            <th scope="col">收货地址</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in payOrder">
                            <th scope="row">{{item.id}}</th>
                            <td>{{item.shippingAddress}}</td>
                            <td>{{item.userName}}</td>
                            <td>{{item.sellerName}}</td>
                            <td>{{item.amount}}</td>
                            <td>{{item.addressProvince}}{{item.addressCity}}
                                {{item.addressDistrict}}{{item.addressDetails}}
                            </td>
                            <td>
                                <button class="btn btn-primary round" @click="send(item.id)">发货</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer id="footer" class="footer-main"></footer>
        <!--End footer -->

    </div>
    <!--End main content -->

</div>
<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>
</body>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    })
</script>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            payOrder: [],
            avatar: ""
        },
        methods: {
            getOrderPay: function () {
                console.log("getOrderPay");
                let thisObj = this;
                let url = "/shop_admin/getOrderPay";
                doGet(url, function (resp) {
                    thisObj.payOrder = resp;
                    console.log(thisObj.payOrder)
                })
            },
            send: function (id) {
                let thisObj = this;
                let url = "/shop_admin/sendGoods";
                let param = {
                    id: id,
                };
                doPost(url, param, function () {
                    location.href = "/view_admin/orderManage.html"
                })
            },
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/" + resp;
                    console.log(thisObj.avatar);
                })
            }
        },
        mounted: function () {
            this.getOrderPay();
            this.getAvatar();
        }
    })
</script>
